<template>
  <div class="app-container towSearchHeader">
    <div class="customContainer">
      <!-- 头 -->
      <!-- <div class="customHeader fSize18 text-center">
        <div>{{time}} {{store_name}}日报详情</div>
      </div> -->
      <!-- 权限tap标签分类 -->
      <!-- <el-tabs v-model="formInline.type" @tab-click="handleClick">
        <el-tab-pane label="机台出货" name="1"></el-tab-pane>
      </el-tabs> -->

      <div class="customHeader">
        <div class="bottom_box_total">
          <div style="margin-bottom:10px">礼品机出库明细表</div>
          <span style="margin-left:6px;"> 门店：{{store_name}} </span>
          <span style="padding-left:15px">时间： {{lasttime}} </span>
        </div>
      </div>
      <!-- 列表 -->
      <dj-simple-table :columns="tableColumns" :data="list" :loading="listLoading" />
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <span class="pull-right mt10" style="font-size:14px;color:#606266">　出货数量合计：{{returnNum}}&#x3000;&#x3000;&#x3000;　　
        <span style="padding-left:20px">
          出货金额合计：{{returnMoney|keepTwoNum}}
        </span>
        &#x3000;&#x3000;</span>
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/storage_control/storeDay_ditail';
import { DjSimpleTable } from '@/components/table';
export default {
  components: {
    'dj-simple-table': DjSimpleTable
  },
  data() {
    return {
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '区域号',
          dtcol: 'area_name'
        },
        {
          label: '机台号',
          dtcol: 'mno'
        },
        {
          label: '机台类型',
          dtcol: 'type_name'
        },
        {
          label: '礼品名称',
          dtcol: 'gift_name'
        },
        {
          label: '神采编号',
          dtcol: 'gift_no_obsolete'
        },
        {
          label: '礼品编号',
          dtcol: 'gift_id'
        },
        {
          label: '盘点数（个）',
          dtcol: 'check_num'
        },
        {
          label: '出货数（个）',
          dtcol: 'unitsshipped'
        },
        {
          label: '成本价（元）',
          dtcol: 'money_cost',
          isnum:true
        },
        {
          label: '出货金额（元）',
          dtcol: 'out_money',
          isnum:true
        }
      ],
      list: [],
      listLoading: false,
      store_name: '',
      lasttime: '',
      formInline: {
        store_id: this.$route.params.store_id,
        type: '1',
        begin_time: this.$route.params.time,
        end_time: this.$route.params.time
      },
      returnNum:0,
      returnMoney:0,

    };
  },
  created() { 
    this.formInline.store_id = this.$route.params.store_id;
    this.formInline.begin_time = this.$route.params.time;
    this.formInline.end_time = this.$route.params.time;
    this.fetchData();
  },
  methods: {
    // handleClick(tab, event) {
    //   this.fetchData();
    // },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.returnNum = 0;
      this.returnMoney = 0;
      getList(this.formInline)
        .then(response => {
          this.list = response.list;
          let list = this.list;
          if(list.length > 0) {
              for(let key in list) {
                  list[key].index = parseInt(key) + 1;
                  this.returnNum += parseInt(list[key].unitsshipped);
                  this.returnMoney += parseFloat(list[key].out_money);
              }
          }
          this.list = list
          this.store_name = response.store_name;
          this.lasttime = response.time;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.bottom_box_total { 
  font-size: 14px;
  color: #606266;
}
</style>